<template>
  <el-dialog width="600px" :title="dialogTitle" :visible.sync="visible">
    <div style="width: 550px; margin: 0 auto; display: flex; flex-wrap: wrap;" :style="{width:qrList.length>=2 ? '550px' : ' 260px'}">
      <div v-for="(item,index) in qrList" :key="index" style="width: 250px">
        <img style="width:100%" id="resultQrcode" :src="item.qrcode" />
        <div v-if="!isWxMini" style="text-align: center">
          <el-button
            size="mini"
            type="primary"
            @click="
              copyShareText(
                data.name,
                item.h5_title,
                item.h5_link,
                item.h5_login_link
              )
            "
            >复制链接</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { createh5Link } from "../generate";
import logoUrl from "@/assets/images/logo.png";
import { copyH5Img } from "@/views/promoter/generate";
import request from "@/utils/fetch";
import ttlogoUrl from "@/assets/images/ttlogo.png";
export default {
  data() {
    return {
      logoUrl,
      qrcode: "",
      link: "",
      qrTitle: "",
      ttqrcode: "",
      qrListCache:{

      },
      qrList:[],
      isWxMini: false,
      dialogTitle: "二维码",
      visible: false,
      data: {},
    };
  },
  methods: {
    copyH5Img,
    copyShareText(name, projectName, link, loginUrl) {
      console.log(`${name} ${projectName}\n${projectName}H5登录地址：${loginUrl}\nhttps短链接：${link}\n登录名：${
          this.data.phone
        }\n初始密码：${this.data.phone.substring(5)}`);
      this.copyText(
        `${name} ${projectName}\n${projectName}H5登录地址：${loginUrl}\nhttps短链接：${link}\n登录名：${
          this.data.phone
        }\n初始密码：${this.data.phone.substring(5)}`
      );
    },
    copyText(t) {
      // 如果当前浏览器版本不兼容navigator.clipboard
      if (!navigator.clipboard) {
        var ele = document.createElement("textarea");
        ele.value = t;
        document.body.appendChild(ele);
        ele.select();
        document.execCommand("copy");
        document.body.removeChild(ele);
        if (document.execCommand("copy")) {
          this.$message.success("复制成功");
        } else {
          this.$message.error("复制失败");
        }
      } else {
        navigator.clipboard
          .writeText(t)
          .then(() => {
            this.$message.success("复制成功");
          })
          .catch((e) => {
            this.$message.error("复制失败");
          });
      }
    },
    openWithWx(row) {
      this.isWxMini = true;
      this.visible = true;
      this.qrcode = "";
      this.dialogTitle = "微信小程序二维码";
      request
        .post("/Admin/Promoter/mpPromoterQr", { promoter_id: row.promoter_id })
        .then((qrcode) => {
          this.qrList = [{qrcode}];
        });
    },
    open(row) {
      this.isWxMini = false;
      this.dialogTitle = "h5二维码";
      this.visible = true;
      this.qrTitle = row.h5_title;
      this.data = row;
      let len = 0;
      this.$nextTick(() => {
        request
          .post("/Admin/Promoter/getQr", { promoter_id: this.data.promoter_id })
          .then((res) => {
            this.qrListCache = {};
            this.qrList = [];
            res.forEach((item,index) => {
              createh5Link(item.h5_link, item.title, item.logoUrl, (qrcode) => {
                this.qrListCache[index] = {...item,qrcode}
                len++;
                if(len == res.length){
                  this.qrList = Object.values(this.qrListCache)
                }
              });
            });
          });
      });
    },
  },
};
</script>
